import React, {useEffect, useState} from "react";
import {ImagesTagsProp, ImageTagQueryProp, ImageTagTableProp} from "@/pages/docker/modules";
import {Input, Select, Space, Table, Typography} from "antd";
import {useRequest} from "ahooks";
import {imagesTags} from "@/api/docker";
import {ColumnsType} from "antd/es/table";
import {formatFileSize} from "@/utils/other";

const ImagesTagsTable: React.FC<ImagesTagsProp> = ({name, selectTag}) => {

    const columns: ColumnsType<ImageTagTableProp> = [
        {
            title: '标识',
            key: 'digest',
            dataIndex: 'digest',
            align: 'center',
            ellipsis: true,
            width: 200,
            render: (text, record) => <Typography.Link>{text}</Typography.Link>
        },
        {
            title: '标签',
            key: 'name',
            dataIndex: 'name',
            align: 'center'
        },
        {
            title: '大小',
            key: 'full_size',
            dataIndex: 'full_size',
            align: 'center',
            width: 160,
            render: (text, record) => <>{formatFileSize(record.full_size)}</>
        },
        {
            title: '创建时间',
            key: 'createTime',
            dataIndex: 'createTime',
            align: 'center',
            width: 160,
        }
    ]

    const [total, setTotal] = useState<number>(0);
    const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
    const [tagsQuery, setTagsQuery] = useState<ImageTagQueryProp>({page: 1, size: 10, imageName: ''});
    const [datasource, setDatasource] = useState<ImageTagTableProp[]>([]);
    const {loading, run} = useRequest(imagesTags, {
        manual: true,
        onSuccess: (data)=> {
            setDatasource(data.records);
            setTotal(data.total)
        }
    })

    useEffect(() => {
        if (name && name !== "") {
            setTagsQuery({...tagsQuery, imageName: name})
            run({...tagsQuery, imageName: name})
        }
    }, [name])

    return <>
        <Space>
            <div>标签名称：</div>
            <Input placeholder="输入标签名称进行搜索" allowClear />
            <div>排序：</div>
            <Select
                defaultValue="last_updated"
                style={{ width: 120 }}
                onChange={(e) => run({...tagsQuery, ordering: e})}
                options={[
                    { value: 'last_updated', label: '最新' },
                    { value: '-last_updated', label: '最老' },
                    { value: '-name', label: '名称降序' },
                    { value: 'name', label: '名称升序' },
                ]}
            />
        </Space>
        <Table
            bordered
            size={'small'}
            columns={columns}
            loading={loading}
            dataSource={datasource}
            style={{ marginTop: 10 }}
            rowKey={(record) => record.id}
            pagination={{
                onShowSizeChange: (current, size) => run({...tagsQuery, page: current, size: size}),
                onChange: (page, pageSize) => run({...tagsQuery, page: page, size: pageSize}),
                showTotal: () => `共 ${total} 个`,
                showQuickJumper: true,
                showSizeChanger: true,
                pageSize: tagsQuery.size,
                current: tagsQuery.page,
                size: 'default',
                total: total,
            }}
            rowSelection={{
                type: 'checkbox',
                selectedRowKeys: selectedRowKeys,
                onChange: (selectedRowKeys: React.Key[], selectedRows: ImageTagTableProp[]) => {
                    setSelectedRowKeys([...selectedRowKeys.map(item => item as string)])
                    selectTag(selectedRowKeys[0] as string)
                }
            }}
        />
    </>
}

export default ImagesTagsTable;